<template>
  <div class="user-page">
    <!-- 顶部用户信息 -->
    <van-cell-group class="user-info">
      <van-cell class="hd" v-if="data.user.token" center :border="false">
        <template #icon>
          <van-image
              style="margin: 0 8px 0 17px"
              width="50"
              height="50"
              round
              :src="data.user.avatar"
              class="user-avatar"
          />
        </template>
        <template #title>
          <div class="user-nickname">{{data.user.name}}</div>
        </template>
      </van-cell>
      <van-cell v-else class="hd">
        <div class="align-center">
          <img src="@/assets/images/touxiang.png" alt="">
          <div class="name"><div style="display: inline-block" @click="router.push('/login')">登录</div>/<div style="display: inline-block">注册</div></div>
        </div>
      </van-cell>
    </van-cell-group>

    <!-- 订单状态 -->
    <van-cell-group class="order-section" title="我的订单" inset>
      <van-grid clickable>
        <van-grid-item icon="records" @click="router.push({path:'/dingdan/'+ '待发货'})" text="待发货" />
        <van-grid-item icon="send-gift-o" @click="router.push({path:'/dingdan/'+ '已发货'})" text="已发货" />
        <van-grid-item icon="logistics" @click="router.push({path:'/dingdan/'+ '已完成'})" text="已完成" />
        <van-grid-item icon="cash-back-record" @click="shouhou" text="退款/售后"  />
      </van-grid>
    </van-cell-group>

    <!-- 常用功能 -->
    <van-cell-group class="features" title="常用功能" inset>
      <van-cell title="收货地址" is-link @click="shouhuodizhi" />
      <van-cell title="我的收藏" is-link @click="shoucang" />
      <van-cell title="优惠券" is-link  @click="gongnengweishixian"/>
      <van-cell title="浏览记录" is-link @click="gongnengweishixian"/>
      <van-cell title="设置" is-link @click="gongnengweishixian"/>
    </van-cell-group>

    <!-- 底部按钮 -->
    <div v-if="data.user.token" class="logout-button">
      <van-button block type="danger" @click="logout">退出登录</van-button>
    </div>
  </div>
</template>
<script setup>
import {
  Cell as VanCell,
  CellGroup as VanCellGroup,
  Image as VanImage,
  Grid as VanGrid,
  GridItem as VanGridItem,
  Tag as VanTag,
  Button as VanButton, showNotify
} from 'vant'
import {reactive} from "vue";
import router from "@/router/index.js";
const data = reactive({
  user: JSON.parse(localStorage.getItem('code_user') || '{}'),
})
// 退出登录逻辑
const logout = () => {
  // 可以触发清除 token、跳转登录页等操作
  console.log('退出登录')
  localStorage.removeItem('code_user')
  location.href = '/login'
}
const shouhou = () => {
  console.log('售后');
  // 跳转到收藏页面或弹出确认框
  showNotify({type: 'warning', message: '售后功能暂未实现，敬请谅解'});
};
const shouhuodizhi = () => {
  console.log('收货地址');
  // 跳转到收货地址页面或弹出确认框
  showNotify({type: 'warning', message: '收货地址功能暂未实现，敬请谅解'});
};
const shoucang = () => {
  console.log('收藏');
  // 跳转到收藏页面或弹出确认框
  router.push({path:'/shoucang'})
  // showNotify({type: 'warning', message: '收藏功能暂未实现，敬请谅解'});
};
const gongnengweishixian = () => {
  console.log('收藏');
  // 跳转到收藏页面或弹出确认框
  showNotify({type: 'warning', message: '功能暂未实现，敬请谅解'});
};
</script>
<style scoped>
.hd{
  background: url(@/assets/images/bg.png) center 0 #f37d0f;
  background-size: auto 100%;
  padding: .32rem 0;
}
.align-center {
  -webkit-box-align: center;
  align-items: center;
  display: flex;
  padding: .32rem 0;
  img{
    margin: 0 .16rem 0 .32rem;
    width: .96rem;
    height: .96rem;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 100%;
    border: 3px solid hsla(0, 0%, 100%, .4);
    text-align: center;
  }
  .name{
    color: #fff;
    font-size: 0.48rem;
    text-align: left;
  }
}
.user-page {
  background-color: #f7f8fa;
  min-height: 100vh;
}

.user-info {
  background-color: white;
}

.user-avatar {
  margin-right: 15px;
}

.user-nickname {
  font-size: 0.45rem;
  font-weight: bold;
  color: #333;
}

.order-section {
  margin-top: 15px;
}

.features {
  margin-top: 15px;
}

.logout-button {
  margin: 30px 16px 0;
}
</style>
